<template>
  <div class="container">
    <div class="formbox">
      <el-form
        :rules="rules"
        label-position="left"
        label-width="100px"
        :model="formData"
        ref="formData"
      >
        <el-form-item label="文章标题：" prop="title">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <el-form-item label="所属类目：" prop="type">
          <el-select
            v-model="formData.type"
            placeholder="请选择类目"
            style="-webkit-tap-highlight-color: transparent;"
          >
            <el-option
              v-for="item in typeList"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容编辑器 -->
    <div class="editbox">
      <div class="top">
        <tinymce-editor ref="editor" v-model="formData.content"></tinymce-editor>
      </div>
      <div style="text-align:right;margin-top:10px;">
        <el-button type="primary" @click="okSubmit('formData')">确认</el-button>
        <el-button @click="notSubmit('formData')">清空</el-button>
      </div>
      <h3 style="text-align:center;color:#0075a9;margin-top:10px;">文章预览</h3>
      <div class="bottom">
        <h4 style="margin-bottom:10px;">{{formData.title}}</h4>
        <p v-html="formData.content"></p>
      </div>
    </div>
  </div>
</template>

<script>
import TinymceEditor from "../../componentSun/editor";
export default {
  components: {
    TinymceEditor
  },
  data() {
    return {
      typeList: [], //存放所有类别
      formData: {
        //文章id，标题，类别,html内容
        id: this.$route.params.id || "",
        title: "",
        type: "",
        content: "",
        author: this.$store.state.user.name || ""
      },
      operation: "", //判断 add 或 update 操作
      rules: {
        type: [{ required: true, message: "请选择类目", trigger: "change" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getTypeLis();
    //查询修改文章
    if (this.formData.id !== "") {
      this.$axios
        .get("/api/article/selectById/" + this.formData.id)
        .then(res => {
          this.operation = "update";
          this.formData = res.data.article;
        });
    } else {
      this.operation = "add";
    }
  },
  methods: {
    //获取类目
    getTypeLis() {
      this.$axios
        .get("/api/article/queryAllName")
        .then(res => {
          this.typeList = res.data;
        })
        .catch(err => {
          this.$message.error("获取类目失败");
        });
    },
    //确认信息
    okSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.operation == "add") {
            this.$confirm("确认要发布吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              center: true
            }).then(() => {
              this.$axios
                .post("/api/manage/article/addArticle", this.formData)
                .then(res => {
                  if (res.data.status == 1) {
                    this.$message({
                      type: "success",
                      message: "发布成功!"
                    });
                    this.formData = {
                      id: "",
                      title: "",
                      type: "",
                      content: "",
                      author: ""
                    };
                  } else {
                    this.$alert("发布失败：" + res.data.message, {
                      confirmButtonText: "确定",
                      center: true
                    });
                  }
                });
            });
          } else if (this.operation == "update") {
            this.$confirm("确认要修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              center: true
            }).then(() => {
              this.$axios
                .post("/api/manage/article/updateArticle", this.formData)
                .then(res => {
                  if (res.data.status == 1) {
                    this.$message({
                      type: "success",
                      message: "修改成功!"
                    });
                    this.formData = {
                      id: "",
                      title: "",
                      type: "",
                      content: "",
                      author: this.$store.state.user.name
                    };
                  } else {
                    this.$alert("修改失败：" + res.data.message, {
                      confirmButtonText: "确定",
                      center: true
                    });
                  }
                });
            });
          }
        } else {
          return false;
        }
      });
    },
    //清空按钮
    notSubmit(formName) {
      this.$refs.editor.clear();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .bottom {
    h4 {
      text-align: center;
    }
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    height: 600px;
    border: 1px solid #ccc;
    margin-top: 10px;
  }
}
</style>